<div class="portlet-body form " id="form_wizard_1">
	<form action="#" class="form-horizontal" id="form-ujian" method="post">
		<div class="form-wizard">
			<div class="navbar steps">
				<div class="navbar-inner">
					<ul class="row-fluid">
						<li class="span3"><a href="#tab1" data-toggle="tab"
							class="step active"> <span class="number">1</span> <span
							class="desc"><i class="icon-ok"></i>Detail Ujian</span>
						</a></li>
						<li class="span3"><a href="#tab2" data-toggle="tab" class="step"> <span
							class="number">2</span> <span class="desc"><i class="icon-ok"></i>Soal Ujian</span>
						</a></li>
					</ul>
				</div>
			</div>
			<div id="bar" class="progress progress-success progress-striped">
				<div class="bar"></div>
			</div>
			<div class="tab-content">
				<div class="tab-pane active" id="tab1">
					<div class="control-group">
						<label class="control-label">Judul Ujian</label>
						<div class="controls">
							<input type="text" class="span6 m-wrap" name="uj_name" value="<?php echo $uj_name;?>" />
							<span class="help-inline">(judul ujian)</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">Mata Pelajaran</label>
						<div class="controls">
							<select class="span6 chosen" data-placeholder="Choose a Category" tabindex="1" name="mp_id">
								<option value="" />Pilih Mata Pelajaran...
								<?php foreach($row_mp as $row){
									$selected = "";
									if($row->mp_id == $mp_id) $selected = "selected";
									?>
									<option <?php echo $selected;?> value="<?php echo $row->mp_id;?>" /><?php echo $row->mp_name;?>
										<?php }?>
									</select>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label">Kelas</label>
								<div class="controls">
									<select data-placeholder="Pilih Kelas..." name="kelas[]" class="chosen span6" multiple="multiple" tabindex="6" id="uj_kelas">
										<option value="" />Pilih Kelas...
										<?php
										$kl_rank = '0';
										foreach ($kelas as $kls){
											$selected = '';
											if(in_array($kls->kl_id, $classes)) $selected = 'selected';
											if($kl_rank != $kls->kl_rank) echo '<optgroup label="Tingkat '.$kls->kl_rank.'">';
											?>
											<option value="<?php echo $kls->kl_id;?>" <?php echo $selected;?>/><?php echo $kls->kl_name;?>
												<?php if($kl_rank != $kls->kl_rank){
													echo '</optgroup>';
													$kl_rank = $kls->kl_rank;
												}}?>
											</select>
										</div>
									</div>

									<div class="control-group">
										<label class="control-label">Jumlah Jawaban</label>
										<div class="controls">
											<label class="radio">
												<input type="radio" name="ans_tot" value="4" checked="" />
												4
											</label>
											<label class="radio">
												<input type="radio" name="ans_tot" value="5" />
												5
											</label>
										</div>
									</div>

									<div class="control-group">
										<label class="control-label">Tanggal</label>
										<div class="controls">
											<input class="m-wrap m-ctrl-medium date-picker" size="16" type="text" value="<?php echo $uj_date;?>" name="uj_date" />
										</div>
									</div>
									<div class="control-group">
										<label class="control-label">Waktu Mulai</label>
										<div class="controls">
											<div class="input-append bootstrap-timepicker-component">
												<input class="m-wrap m-ctrl-small timepicker-24" type="text" value="<?php echo $uj_start;?>" name="uj_start" />
												<span class="add-on"><i class="icon-time"></i></span>
											</div>
										</div>
									</div>
									<div class="control-group">
										<label class="control-label">Waktu Selesai</label>
										<div class="controls">
											<div class="input-append bootstrap-timepicker-component">
												<input class="m-wrap m-ctrl-small timepicker-24" type="text" value="<?php echo $uj_end;?>" name="uj_end" />
												<span class="add-on"><i class="icon-time"></i></span>
											</div>
										</div>
									</div>

								</div>
								<div class="tab-pane" id="tab2">
									<!-- BEGIN FORM-->
									<div class="portlet-body">
										<table class="table table-striped table-bordered" id="soal_table">
											<thead>
												<tr>
													<th style="width: 8px;"><input type="checkbox"
														class="group-checkable" data-set="#sample_1 .checkboxes" />
													</th>
													<th>Isi Soal</th>
													<th style="width: 15%;" class="hidden-phone">Edit</th>
												</tr>
											</thead>
											<tbody>
												<?php foreach($soals as $soal){?>
												<tr id="row<?php echo $soal->so_id;?>">
													<td><input type="checkbox" class="checkboxes" value="1" /></td>
													<td id="soal<?php echo $soal->so_id;?>"><?php echo $soal->so_desc;?></td>
													<td>
														<a href="#" class="btn mini purple" id="edit-soal" onclick="update(<?php echo $soal->so_id;?>)"><i class="icon-edit"></i> Edit </a>
														<a href="#" class="btn mini black" id="delete-soal" onclick="delete_soal(<?php echo $soal->so_id;?>)"><i class="icon-trash"></i> Delete</a>
													</td>
												</tr>
												<?php }?>
											</tbody>
										</table>
										<input type="hidden" name="id" value="<?php echo $uj_id;?>" />
										<a href="#" class="btn blue" id="add-soal">Add</a>
									</div>
									<!-- END FORM-->
								</div>
							</div>
							<div class="form-actions clearfix">
								<a href="javascript:;" class="btn button-previous"><i class="m-icon-swapleft"></i>Back</a>
								<a class="btn blue button-next" id="next">Continue<i class="m-icon-swapright m-icon-white"></i></a>
								<button class="btn green button-submit" id="submit-ujian">Submit<i class="m-icon-swapright m-icon-white"></i></button>
								<a href="<?php echo site_url('/ujian')?>" class="btn grey" id="cancel-ujian">Batal</a>
								<button class="btn grey" id="cancel-ujian">Batal & Hapus</button>
							</div>
						</div>
					</form>
				</div>


				<div class="portlet-body form" id="popup-form" style="overflow-y:scroll; height:500px;">
					<!-- BEGIN FORM-->
					<form action="#" class="form-vertical" id="form-add-soal" enctype="multipart/form-data" method="post">
						<div id="soal-body">
							<input type="hidden" name="uj_id" id="uj_id" />
							<input type="hidden" name="ja_stat" value="1" />
							<div class="alert alert-block alert-info fade in">
								<div class="row-fluid">
									<div class="span12 sortable">
										<div class="control-group">
											<label class="control-label">Soal</label>
											<div class="controls">
												<textarea class="ckeditor so_desc" cols="80" id="editor1" name="so_desc" rows="10"></textarea>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="alert alert-block alert-success fade in">
								<div class="control-group">
									<label class="control-label">Jawaban Benar</label>
									<div class="controls">
										<textarea class="ckeditor" id="editor2" cols="80" name="ja_desc[]" rows="10"></textarea>
									</div>
								</div>
							</div>
							</div>

							<div class="row-fluid">
								<div class="span12 sortable">
									<button type="submit" id="submit-soal" class="btn green button-submit submit">Submit</button>
									<button type="submit" id="add-again" class="btn blue submit"><i class="icon-plus"></i>Tambah</button>
								</div>
							</div>
					</form>
		<!--END FORM-->
				</div>
<div class="dialog" id="loading-scr">
	<img border="0" src="<?php echo base_url();?>images/loading.gif" alt="" style="margin-top: 20%;">
</div>


<style>
	.dialog {
		z-index: 99;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		text-align: center;
	}
</style>
<script type="text/javascript">
	$(function() {
		$('#ad').on('click','option',function(){

		});
	});
	function popup_form(id){
		$("#form-add-soal").unbind('submit');
		if(!id){
			$("#form-add-soal").resetForm();
			$("#so_pict").attr('src','');
			$("input:radio[name=ja_stat][value=1]").prop("checked", true);
			CKEDITOR.instances['editor1'].setData('');
		}

		var dimmer = document.createElement("div");
		dimmer.style.width =  $(window).width() + 'px';
		dimmer.style.height = $(window).height() + 'px';
		dimmer.className = 'dimmer';

		dimmer.onclick = function(){
			document.body.removeChild(this);
			$('#popup-form').css('display', 'None');
		};

		document.body.appendChild(dimmer);

		var cssObj = {
			'display': 'block',
			'top': '50px',
			'left': ($(window).width()-$('#popup-form').width())/2 + 'px'
		};
		$('#popup-form').css(cssObj);

		var button = null;
		$('.submit').click(function() {
			button = $(this).attr('id');
		});
		if(id){
			var options = {
				clearForm: true,
				data: {so_id:id},
				success: function(responseText, statusText, xhr, $form){
					var rows = $.parseJSON(responseText);
					update_row(rows);
					$('#loading-scr').css({'display': 'none',});
				},
				error : function(){
					$('#loading-scr').css({'display': 'none',})
				},
				beforeSubmit: beforeSubmit,
				url : "<?php echo base_url();?>soal/update",
			};
		}else{
			var options = {
				clearForm: true,
				url : "<?php echo base_url();?>soal/insert",
				success: function(responseText, statusText, xhr, $form){
					var rows = $.parseJSON(responseText);
					insert_row(rows);
					$('#loading-scr').css({'display': 'none',});
				},
				error : function(){
					$('#loading-scr').css({'display': 'none',})
				},
				beforeSubmit: beforeSubmit,
			};
		}
		$("#form-add-soal").ajaxForm(options).submit(function(){
			if(button=='submit-soal'){
				document.body.removeChild(dimmer);
				$('#popup-form').css('display', 'None');
			}else{
				document.getElementById('form-add-soal').reset();
				CKEDITOR.instances['editor1'].setData('');
			}
			return false;
		});
	}

	function beforeSubmit(arr, $form, options){
		var callback = true;
		$.each(arr, function(i, data){
			if(!data.value){
				if(data.name!="so_pict"){
					callback = false;
				}
			}
		});
		if(!callback) alert("Isi semua kolom");
		else $('#loading-scr').css({'display': 'block',});
		return callback;
	};

	function delete_soal(id){
		if(confirm('Apakah anda yakin?')){
			$.post('<?php echo base_url();?>soal/delete', 'so_id='+id).done(
				$('#row'+id).remove()
				);
		}
	}

	$('#submit-ujian').click(function(){
		$.ajax({
			type: 'GET',
			url: "<?php echo site_url('ujian/aktivasi');?>/" + $("#uj_id").val(),
			timeout: 5000,
			success: function(data, textStatus){
				window.location.href = "<?php echo base_url();?>ujian";
			}
		});
		return false;
	});

	$('#cancel-ujian').click(function(){
		$.ajax({
			type: 'GET',
			url: "<?php echo site_url('ujian/delete');?>/" + $("#uj_id").val(),
			timeout: 5000,
			success: function(data, textStatus){
				window.location.href = "<?php echo base_url();?>ujian";
			}
		});
		return false;
	});

	function insert_row(rows){
		var row = '';
		$.each(rows, function(i, item) {
			row += '<tr id="row'+item.so_id+'">'+
			'<td><input type="checkbox" class="checkboxes" value="1" /></td>'+
			'<td id="soal'+item.so_id+'">'+item.so_desc+'</td>'+
			'<td>'+
			'<a href="#" class="btn mini purple" id="edit-soal" onclick="update('+item.so_id+')"><i class="icon-edit"></i> Edit </a> '+
			'<a href="#" class="btn mini black" id="delete-soal" onclick="delete_soal('+item.so_id+')"><i class="icon-trash"></i> Delete</a>'+
			'</td>'+
			'</tr>';
		});
		$('#soal_table > tbody:last').append(row);
	}

	function update_row(rows){
		var row = '';
		$.each(rows, function(i, item) {
			$('#soal'+item.so_id).text(item.so_desc);
			$('#jawaban'+item.so_id).text(item.ja_correct);
		});
	}

	function update(id){
		$("#form-add-soal").resetForm();
		$.getJSON("<?php echo base_url();?>soal/get_soal/"+id,
			function(data){
				$.each(data, function(field, value) {
					switch(field){
						case "so_desc":
						CKEDITOR.instances['editor1'].setData(value);
						break;
						case "so_pict":
						var so_pict = value?value:'images/no-image.jpg';
						$("#so_pict").attr('src','<?php echo base_url();?>'+so_pict);
						break;
						case "ja_stat":
						$('input:radio[name=ja_stat][value='+value+']').prop("checked", true);
						break;
						default:
						$("."+field).val(value);
					}
				});
			}
		);
		popup_form(id);
	}

	function build_form_soal(n){
		var id = "";
		for(var i=0;i<n-1;i++){
			id = "editor"+(i+3)
			$("#soal-body").append('<div class="alert alert-block alert-warning fade in">'+
				'<div class="control-group">'+
					'<label class="control-label">Jawaban Salah</label>'+
					'<div class="controls">'+
						'<textarea class="ckeditor" id="'+id+'" cols="80" name="ja_desc[]" rows="10"></textarea>'+
					'</div>'+
				'</div>'+
			'</div>');
			CKEDITOR.replace(id);
		}
	}

	$("#add-soal").click(function() {
		popup_form(false);
	});

	$("#next").click(function(){
		$.ajax({
			type: 'POST',
			dataType: 'json',
			data: $("#form-ujian").serialize(),
			url: "<?php echo base_url();?>ujian/action/<?php echo $act;?>",
			timeout: 5000,
			success: function(data, textStatus){
				var rows = String(data).split(',');
				$("#uj_id").val(rows[0]);
				build_form_soal(parseInt($('input[name=ans_tot]:checked').val()));
			},
			error: function(xhr, textStatus, errorThrown){
				$("#uj_id").val('0');
			}
		});
	});
</script>